<template>
  <view class="bank-item" :style="bankThem">
    <!-- 111 -->
    <canvas v-if="showCanvas" class="bank-icon" :id="uuid" :canvas-id="uuid" />
    <!-- <canvas v-if="showCanvas" class="bank-icon" id="bankIcon" canvas-id="bankIcon" /> -->
    <view class="bank-head">
      <image :src="`/static/bank-img/${bankCode}.jpg`"></image>
      <view class="bank-info">
        <text class="bank-name">{{ bankName }}</text>
        <text class="card-type">{{ cardType }}</text>
      </view>
    </view>
    <view class="card-code">
      <text class="omit">****</text>
      <text class="omit">****</text>
      <text class="omit">****</text>
      <text>{{ endNumber }}</text>
    </view>
    <view class="bank-watermark" :style="waterMark" />
  </view>
</template>

<script>
export default {
  name: "bankItem",
  props: {
    bankCode: { type: String, required: false, default: "ABC" }, // logo名称
    bankName: { type: String, required: false, default: "中国农业银行" },  //名称
    cardType: { type: String, default: "储蓄卡" },
    cardCode: { type: String, required: false, default: "5106365987639" }, // 银行logo
  },
  computed: {
    waterMark() {
      return `background-image: url(${this.image});`;
    },
    endNumber() {
      let length = this.cardCode.length;
      return this.cardCode.substr(length - 4, length);
    },
  },
  data() {
    // #ifndef MP-WEIXIN
    const buildUuid = () => {
      return "bank_" + parseInt(Math.random() * 100000000);
    };
    // #endif
    return {
      bankThem: "",
      image: "",
      showCanvas: true,
      // #ifdef MP-WEIXIN
      uuid: "bankIcon",
      // #endif
      // #ifndef MP-WEIXIN
      uuid: buildUuid(),
      // #endif
    };
  },
  methods: {
    async buildItem() {
      this.bankThem = uni.getStorageSync(`BANK_${this.bankCode}`);
      this.image = await this.getBankLogo();
      await this.getThemColor();
      this.showCanvas = false;
    },
    async getThemColor() {
      if (this.bankThem != null && this.bankThem != "") return;
      let bgSize = uni.upx2px(100);
      let iconSize = uni.upx2px(72);
      this.iconContext = uni.createCanvasContext(this.uuid, this);
      this.iconContext.width = bgSize;
      this.iconContext.height = bgSize;
      this.iconContext.fillStyle = "#FFFFFF";
      this.iconContext.beginPath();
      let bgRadio = bgSize / 2;
      this.iconContext.arc(
        bgRadio,
        bgRadio,
        bgRadio - 1,
        0,
        2 * Math.PI,
        0,
        true
      );
      this.iconContext.closePath();
      this.iconContext.fill();
      let iconRadio = bgSize / 2 - iconSize / 2;
      this.iconContext.drawImage(
        this.image,
        iconRadio,
        iconRadio,
        iconSize,
        iconSize
      );
      await this.draw(this.iconContext);
      let imageData = await this.getImageData(iconRadio, iconSize);
      this.parsingImageData(imageData);
    },
    parsingImageData(imageData) {
      let statistics = {};
      for (let i = 0, length = imageData.length; i < length; i += 4) {
        let r = imageData[i];
        let g = imageData[i + 1];
        let b = imageData[i + 2];
        if (r + g + b < 400) {
          let rgb = [r, g, b];
          let key = rgb.join(", ");
          statistics[key] = statistics[key] == null ? 1 : statistics[key] + 1;
        }
      }
      let maxKey = "";
      Object.keys(statistics).forEach((key) => {
        if (maxKey === "") {
          maxKey = key;
        } else {
          maxKey = statistics[maxKey] > statistics[key] ? maxKey : key;
        }
      });
      let beginColor = maxKey
        .split(", ")
        .map((item, index) => {
          item = parseInt(item);
          if (index > 1) return item;
          let newColor = item + 50;
          return newColor > 255 ? 255 : newColor;
        })
        .join(", ");
      this.bankThem = `background-image: linear-gradient(45deg, rgba(${beginColor}, 1), rgba(${maxKey}, 1));`;
      console.log("this.bankThem ", this.bankThem);
      uni.setStorageSync(`BANK_${this.bankCode}`, this.bankThem);
    },
    getImageData(radio, size) {
      return new Promise((resolve, reject) => {
        uni.canvasGetImageData(
          {
            canvasId: this.uuid,
            x: radio,
            y: radio,
            width: size,
            height: size,
            success(res) {
              resolve(res.data);
            },
            fail(err) {
              console.log(err);
              reject();
            },
          },
          this
        );
      });
    },
    getBankLogo() {
      // this.image= ''
      // this.bankThem= ''
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url: "https://img1.baidu.com/it/u=264295790,958316721&fm=253&fmt=auto&app=138&f=JPEG?w=1164&h=500",
          success(res) {
            if (res.statusCode === 200) {
              console.log("下载成功", res);
              resolve(res.tempFilePath);
              // 在这里可以使用 res.tempFilePath 来处理下载的图片
            } else {
              console.error("下载失败", res.statusCode);
            }
          },
          fail(err) {
            console.error("请求失败", err);
          },
        });
        // uni.downloadFile({
        // 	url: `https://banklogo.yfb.now.sh/resource/logo/${this.bankCode}.png`,
        // 	success(res) {
        // 		resolve(res.tempFilePath);
        // 	},
        // 	fail(err) {
        // 		console.log(err);
        // 		reject();
        // 	}
        // });
      });
    },
    draw(context, reserve = false) {
      return new Promise((resolve) => {
        context.draw(reserve, () => {
          resolve();
        });
      });
    },
  },
  created() {
    this.$nextTick(() => {
      this.buildItem();
    });
  },
};
</script>

<style>
.omit {
  font-size: 48rpx;
  margin-right: 30rpx;
}

.card-code {
  margin-top: 15rpx;
  display: flex;
  justify-content: flex-end;
  color: #ffffff;
  font-size: 38rpx;
}

.flex-1 {
  flex: 1;
}

.card-type {
  font-size: 24rpx;
  color: #f1f1f1;
}

.bank-name {
  font-size: 32rpx;
  color: #ffffff;
}

.bank-info {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.bank-head {
  display: flex;
  flex: 1;
  align-items: center;
}

.bank-head image {
  width: 100rpx;
  height: 100rpx;
  padding: 15rpx;
  background-color: #ffffff;
  border-radius: 50%;
  overflow: hidden;
}

.bank-icon {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  width: 100rpx;
  height: 100rpx;
}

.bank-watermark {
  position: absolute;
  right: -184rpx;
  bottom: 0rpx;
  width: 144rpx;
  height: 90rpx;
  background-repeat: no-repeat;
  filter: drop-shadow(-204rpx 0rpx 0rpx #fff);
  opacity: 0.1;
}

.bank-item {
  position: relative;
  flex: 1;
  height: 280rpx;
  margin-top: 20rpx;
  position: relative;
  border-radius: 20rpx;
  padding: 20rpx;
}

.bank-item:after {
  content: "";
  display: block;
  background: inherit;
  filter: blur(10rpx);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10rpx;
  left: 10rpx;
  z-index: -1;
  opacity: 0.4;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}
</style>
